<template>
  <div class="box-yuyi">
    <div class="box-left">
      <container-nav :treeData="categoryTreeData"
                     :loading="treeLoading"
                     :setLabelId="leftCategoryProp"
                     @handleNodeClick="handleNodeClick"></container-nav>
    </div>
    <el-tabs class="box-content" type="border-card">
      <el-tab-pane label="数据列表">
        <data-list :idTable="idTable"
                   :idCategory="idCategory"
                   v-if="idTable"></data-list>
      </el-tab-pane>
      <el-tab-pane label="移交资源下载">
        <export-download :idTable="idTable"
                         v-if="idTable"
                         ref="exportDownload"
                         :idCategory="idCategory"></export-download>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import ContainerNav from '../../../components/containerNav/containerNav'
import { getCategoryTree } from '../../../api/category/category'
import DataList from './dataExportChildren/dataList'
import ExportDownload from './dataExportChildren/exportDownload'

export default {
  name: 'DataExport',
  components: {
    ExportDownload,
    DataList,
    ContainerNav
  },
  data () {
    return {
      treeLoading: true,
      categoryTreeData: [],
      leftCategoryProp: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      idTable: '',
      idCategory: ''
    }
  },
  mounted () {
    // 默认收起左侧导航栏
    this.getLeftCategory()
    this.setNavNarrow(true)
    this.setSearchCondition([])
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    ...mapActions('electronicsFile/getHead', ['getTableHead', 'getTableList']),
    ...mapActions('electronicsFile/setSearchCondition', ['setSearchCondition']),
    getLeftCategory () {
      // 左侧获取门类
      getCategoryTree('qtModel', this.$route.query.isNotAjJnNode).then(res => {
        this.categoryTreeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    async handleNodeClick (data) {
      if (data.idCategory) {
        this.idCategory = data.idCategory
        this.idTable = data.table[0].idTable

        await this.getTableHead(data.table[0].idTable)

        const param = {
          pageNo: 1,
          pageSize: 20
        }
        this.getTableList({
          idTable: this.idTable,
          data: param
        })
        this.$refs.exportDownload.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../../styles/mixin';

  .box-yuyi {

    .box-content {
      padding: 0;
    }

    ::v-deep .el-tabs__content {
      padding: 0;

      .el-tab-pane {
        height: calc(100vh - 125px);
        overflow-y: auto;
        padding: 15px;
      }
    }

  }
</style>
